<template>
	<div class="custom-made">
		<head-bar></head-bar>
		<head-nav :focus="focus"></head-nav>
		<div class="banner-img"></div>
		<div class="change-img">
			<div class="change-1" v-on:mouseover="flag=1" v-on:mouseout="flag=0">
				<transition name="fade">
					<img src="http://static.udz.com/statics/images/teamcustom1/pic_01_00.jpg" v-if="flag!=1" alt="" />
				</transition>
			</div>
			<div class="change-2" v-on:mouseover="flag=2" v-on:mouseout="flag=0">
				<transition name="fade">
					<img src="http://static.udz.com/statics/images/teamcustom1/pic_01_01.jpg" v-if="flag!=2" alt="" />
				</transition>
			</div>
			<div class="change-3" v-on:mouseover="flag=3" v-on:mouseout="flag=0">
				<transition name="fade">
					<img src="http://static.udz.com/statics/images/teamcustom1/pic_01_02.jpg" v-if="flag!=3" alt="" />
				</transition>
			</div>
			<div class="change-4" v-on:mouseover="flag=4" v-on:mouseout="flag=0">
				<transition name="fade">
					<img src="http://static.udz.com/statics/images/teamcustom1/pic_01_03.jpg" v-if="flag!=4" alt="" />
				</transition>
			</div>
		</div>
		<div class="section-title">
			<h2>团体定制</h2>
			<h3>他们选择优定制</h3>
		</div>
		<div class="group-custom">
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_02.jpg" alt="" />
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_03.jpg" alt="" />
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_04.jpg" alt="" />
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_05.jpg" alt="" />
		</div>
		<div class="section-title">
			<h2>超全品类</h2>
			<h3>全面满足你的需求</h3>
		</div>
		<div class="custom-class">
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_06.jpg" />
		</div>
		<div class="section-title">
			<h2>成功案例</h2>
			<h3>全球领先的定制电商&nbsp;合作广泛</h3>
		</div>
		<div class="star-shop">
			<span class="left-title">明星商家</span>
			<img src="../assets/star-shop.png" />
		</div>
		<div class="star-community">
			<span class="left-title">明星客户·社团</span>
			<div class="star-carousel">
				<carousel-small></carousel-small>	
			</div>
		</div>
		<div class="fans">
			<span class="left-title">明星客户·粉丝团</span>
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_015.jpg" />
		</div>
		<div class="fans">
			<span class="left-title">明星客户·大学</span>
			<img src="http://static.udz.com/statics/images/teamcustom1/pic_013.jpg" />
		</div>
		<custom-form></custom-form>
		<about></about>
		<ifooter></ifooter>
	</div>
</template>

<script>
	import headBar from "../components/headBar.vue"
	import headNav from "../components/headNav.vue"
	import ifooter from "../components/ifooter.vue"
	import about from "../components/about.vue"
	import customForm from "../components/customForm.vue"
	import carouselSmall from "../components/carouselSmall.vue"
	export default {
		components: {
			headBar,
			headNav,
			ifooter,
			about,
			customForm,
			carouselSmall,
		},
		data() {
			return {
				flag: 0,
				focus: 4,
			}
		}
	}
</script>

<style lang="less" stylesheet="less">
	.banner-img {
		margin: 0 auto;
		/*width: 1200px;*/
		max-width: 1920px;
		height: 450px;
		background-size: auto 100%;
		/*background-size: contain;*/
		background-repeat: no-repeat;
		background-image: url(../assets/banner.jpg);
		background-position: center center;
	}
	
	.change-img {
		width: 1220px;
		height: 680px;
		margin: 0 auto;
		margin-top: 40px;
		div {
			float: left;
			margin: 10px;
			width: 590px;
			height: 320px;
			img {
				border: none;
				width: 100%;
				height: 100%;
			}
			&.change-1 {
				background-image: url("http://static.udz.com/statics/images/teamcustom1/pic_01_10.jpg");
				background-size: 100% 100%;
			}
			&.change-2 {
				background-image: url("http://static.udz.com/statics/images/teamcustom1/pic_01_11.jpg");
				background-size: 100% 100%;
			}
			&.change-3 {
				background-image: url("http://static.udz.com/statics/images/teamcustom1/pic_01_12.jpg");
				background-size: 100% 100%;
			}
			&.change-4 {
				background-image: url("http://static.udz.com/statics/images/teamcustom1/pic_01_13.jpg");
				background-size: 100% 100%;
			}
		}
	}
	
	.section-title {
		width: 1200px;
		margin: 80px auto;
		text-align: center;
		font-family: "微软雅黑";
		h2 {
			font-size: 2rem;
		}
		h3 {
			margin-top: 5px;
			font-weight: normal;
			font-size: 1.25rem;
		}
	}
	
	.group-custom {
		width: 1200px;
		margin: 0 auto;
		img {
			width: 100%;
			margin-bottom: 15px;
		}
	}
	
	.custom-class {
		width: 1200px;
		margin: 0 auto;
		img {
			width: 100%;
			margin-bottom: 15px;
		}
	}
	
	.star-shop {
		border-top: 1px solid #eeeeee;
		width: 1200px;
		margin: 0 auto;
		img {
			width: 100%;
		}
	}
	.star-community{
		border-top: 1px solid #eeeeee;
		width: 1200px;
		margin: 10px auto;
		.star-carousel{
			width: 1060px;
			margin: 0 auto;
		}


	}
	.fans {
		border-top: 1px solid #eeeeee;
		width: 1200px;
		margin: 0 auto;
		img {
			width: 100%;
		}
	}
	
	.left-title {
		font-size: 1.5rem;
		font-family: "微软雅黑";
		display: block;
		margin: 50px 0;
	}
	
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 1s
	}
	
	.fade-enter,
	.fade-leave-active {
		opacity: 0
	}
</style>